<template>
  <div id="factorSortsMore">
    <mt-header fixed :title="title">
      <mt-button icon="back" slot="left" @click="goBack"></mt-button>
    </mt-header>
    <div class="sort-cont">
      <div class="sort-select">
        <div class="">
          <div class="s-factor sel_bg" v-for="s in selectFactorsFunc">
            {{s.factor_name}}
            <span class="icon-close" @click="selectFactor(s)">
              <i class="fa fa-times" aria-hidden="true"></i>
            </span>
          </div>
        </div>
        <div class="sort-label" v-if="selectFactors.length<=0">
          <p>还没有筛选条件</p>
          <p>请点击下列因子标签，进行筛选</p>
        </div>
        <span class="icon-del" @click="clearFactor">
          <i class="fa fa-trash-o" aria-hidden="true"></i>
        </span>
      </div>
      <div class="sort-condition">
        <my-collapse open="open" :count="count">
          <my-collapse-item title="概念类" :subOpen="subOpen" :open="type==='concept'">
            <div class="s-factor" :class="item.isSelect?'sel_bg':'org_bg'" v-for="item in concept"
                 @click="selectFactor(item)">
              {{item.factor_name}}
            </div>
            <div class="s-more" @click="goToSearchGn">
              <span>更多<i class="fa fa-angle-double-right" aria-hidden="true"></i></span>
            </div>
          </my-collapse-item>
          <my-collapse-item title="技术类" :subOpen="subOpen" :open="type==='tech'">
            <div class="s-factor" :class="item.isSelect?'sel_bg':'org_bg'" v-for="item in tech"
                 @click="selectFactor(item)">
              {{item.factor_name}}
            </div>
            <div class="s-more" @click="goToSearchJs">
              <span>更多<i class="fa fa-angle-double-right" aria-hidden="true"></i></span>
            </div>
          </my-collapse-item>
          <my-collapse-item title="财务类" :subOpen="subOpen" :open="type==='finance'">
            <div class="s-factor" :class="item.isSelect?'sel_bg':'org_bg'" v-for="item in finance"
                 @click="selectFactor(item)">
              {{item.factor_name}}
            </div>
            <div class="s-more" @click="goToSearchCw">
              <span>更多<i class="fa fa-angle-double-right" aria-hidden="true"></i></span>
            </div>
          </my-collapse-item>
          <my-collapse-item title="行业类" :subOpen="subOpen" :open="type==='industry'">
            <div class="s-factor" :class="item.isSelect?'sel_bg':'org_bg'" v-for="item in industry"
                 @click="selectFactor(item)">
              {{item.factor_name}}
            </div>
            <div class="s-more" @click="goToSearchHy">
              <span>更多<i class="fa fa-angle-double-right" aria-hidden="true"></i></span>
            </div>
          </my-collapse-item>
          <my-collapse-item title="风格类" :subOpen="subOpen" :open="type==='style'">
            <div class="s-factor" :class="item.isSelect?'sel_bg':'org_bg'" v-for="item in style"
                 @click="selectFactor(item)">
              {{item.factor_name}}
            </div>
            <div class="s-more" @click="goToSearchFg">
              <span>更多<i class="fa fa-angle-double-right" aria-hidden="true"></i></span>
            </div>
          </my-collapse-item>
          <my-collapse-item title="地域类" :subOpen="subOpen" :open="type==='district'">
            <div class="s-factor" :class="item.isSelect?'sel_bg':'org_bg'" v-for="item in district"
                 @click="selectFactor(item)">
              {{item.factor_name}}
            </div>
            <div class="s-more" @click="goToSearchDy">
              <span>更多<i class="fa fa-angle-double-right" aria-hidden="true"></i></span>
            </div>
          </my-collapse-item>
        </my-collapse>
        <div class="my-collapse-item-open" @click="moreAllSort" v-text="!subOpen?'更多因子':'收起因子'"></div>
      </div>
      <div class="sort-stock">
        <div class="sort-stock-tab">
          <div class="">名称代码</div>
          <div class="">当前价(元)</div>
          <div class="">涨跌幅</div>
          <div class="">市盈率</div>
          <div class="">所属行业</div>
        </div>
        <div class="sort-stock-list" :style="{'-webkit-overflow-scrolling': scrollMode}">
          <div class="sort-stock-list-item" v-for="(item, index) in stockResult" v-model="stockResult" :key="index">
            <div class="">
              <p>{{item.name}}</p>
              <p>{{item.code}}</p>
            </div>
            <div :class="item.now>0?'bg_red':'bg_green'">
              {{(Number(item.now)).toFixed(2)}}
            </div>
            <div :class="(item.now-item.yesterday)>0?'bg_red':'bg_green'">
              {{((item.now - item.yesterday) * 100 / item.yesterday).toFixed(2) + '%'}}
            </div>
            <div>
              {{item.pgr ? item.pgr : '--'}}
            </div>
            <div class="">
              <p>{{item.industries}}</p>
            </div>
          </div>
          <div class="sort-stock-list-item add-more" v-if="allLoaded" @click="loadBottom">
            加载更多
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="footer-wrapper">
        <div class="add-stock" @click="goToAddStock">
          添加自选
        </div>
        <div class="save-strategy" @click="saveStratrgy">保存策略</div>
      </div>
      <mt-actionsheet
        :actions="actions1"
        v-model="sheetVisible">
      </mt-actionsheet>
    </div>
  </div>
</template>

<script>
  // import API from './../services/api'
  import {Toast} from 'mint-ui'

  export default {
    name: 'factorSortsMore',
    data () {
      return {
        open: true,
        title: this.$route.query.strategy_name,
        subOpen: false,
        value: '',
        loading: false,
        count: 0,
        stockPage: 0,
        stockCount: 10,
        stockResult: [],
        type: this.$route.query.type,
        show: false,
        selectFactors: [],
        tech: [],
        concept: [],
        district: [],
        industry: [],
        style: [],
        finance: [],
        code: '',
        sortsFactors: [],
        sheetVisible: false,
        actions1: [
          {
            name: '收藏策略',
            method: {}
          },
          {
            name: '+新建策略',
            method: () => {
              this.newStrategy()
            }
          }
        ]
      }
    },
    created () {
      this.initAllFactors()
      this.getState()
    },
    watch: {},
    methods: {
      goBack: function () {
        // history.back()
        // this.$router.go(-1)
        if (this.$route.query.back === 0) {
          this.$router.replace('/pickStock')
        } else {
          this.$router.go(-1)
        }
      },
      getState () {
        this.$store.commit('clearSelectFactor')
        let allFactor = this.$store.state.allFactors
        if (allFactor.length > 0) {
          let b = allFactor.filter(v => {
            return this.$route.query.factor_id.indexOf(v.factor_id) > -1
          })
          b.forEach(v => {
            v.isSelect = true
            this.$store.commit('pushSelectFactor', v)
          })
        }
      },
      // 添加自选
      goToAddStock () {
        let arrCode = []
        this.selectFactors.forEach(v => {
          arrCode.push(v.factor_id)
        })
        let strCode = arrCode.join(',')
        this.$router.push({path: '/addStock', query: {factors: strCode}})
      },
      initAllFactors () {
        let _allFactors = this.$store.state.allFactors
        this.tech = _allFactors.filter((v, k) => {
          return v.factor_type === 'tech'
        }).filter((v, k) => {
          return k < 8
        })
        this.concept = _allFactors.filter((v, k) => {
          return v.factor_type === 'concept'
        }).filter((v, k) => {
          return k < 8
        })
        this.district = _allFactors.filter((v, k) => {
//          return v.factor_type === 'district' && v.parent_id === null
          return v.factor_type === 'district' && !v.parent_id
        }).filter((v, k) => {
          return k < 8
        })
        this.industry = _allFactors.filter((v, k) => {
          return v.factor_type.indexOf('industry') > -1
        }).filter((v, k) => {
          return k < 8
        })
        this.style = _allFactors.filter((v, k) => {
          return v.factor_type === 'style'
        }).filter((v, k) => {
          return k < 8
        })
        this.finance = _allFactors.filter((v, k) => {
          return v.factor_type === 'finance'
        }).filter((v, k) => {
          return k < 8
        })
      },
      // 选中或未选中因子状态
      selectFactor: function (_item) {
        _item.isSelect = !_item.isSelect
        if (_item.isSelect) {
          this.addFactor(_item)
        } else {
          this.delFactor(_item)
        }
      },
      // 添加选中因子
      addFactor (_item) {
        this.$store.commit('pushSelectFactor', _item)
      },
      // 删除选中因子
      delFactor (_item) {
        this.$store.commit('removeSelectFactor', _item)
      },
      // 清除所有选中因子
      clearFactor () {
        this.$store.commit('clearSelectFactor')
        this.selectFactors = []
      },
      // 展开或收起因子
      moreAllSort () {
        this.subOpen = !this.subOpen
      },
      // 获取股票列表
      getStockList () {
        let _self = this
        let arrCode = []
        this.selectFactors.forEach(v => {
          arrCode.push(v.factor_id)
        })
        let strCode = arrCode.join(',')
        API.getStockCodes({params: {factors: strCode}}).then((res) => {
          // console.log('stock', res)
          return res.data
        }).then((res) => {
          let _ids = []
          res.forEach(v => {
            _ids.push(v.stock_code)
          })
          let _ids1 = _ids.join(',')
          API.getStockResults({params: {stock_codes: _ids1}}).then((req) => {
            // console.log('req', req)
            let x = []
            req.data.forEach(v => {
              x[v.stock_code] = v
            })
            res.forEach(v => x[v.stock_code] && (x[v.stock_code].industries = v.industries))
            x = null
            if (!Array.isArray(req.data)) {
              _self.count = 0
              _self.stockResult = []
            } else {
              _self.count = req.data.length
              // _self.stockResult = req.Data
              req.data.forEach(v => {
                _self.stockResult.push(v)
              })
            }
          })
        })
      },
      // 测试
      getStockListTest () {
        let _self = this
        let arrCode = []
        this.selectFactors.forEach(v => {
          arrCode.push(v.factor_id)
        })
        let strCode = arrCode.join(',')
        API.getStockCodes({params: {factors: strCode}}).then((res) => {
          // console.log('stock', res)
          return res.data
        }).then((res) => {
          if (res.length > 0) {
            let _ids = []
            res.forEach(v => {
              _ids.push(v.stock_code)
            })
            let _ids1 = _ids.join('|')
            API.getStockResults({params: {IDs: _ids1}}).then((req) => {
              // console.log('req', req)
              let x = []
              req.Data.forEach(v => {
                x[v.ID] = v
              })
              res.forEach(v => x[v.stock_code] && (x[v.stock_code].industries = v.industries))
              x = null
              if (!Array.isArray(req.Data)) {
                _self.count = 0
                _self.stockResult = []
              } else {
                _self.count = req.Data.length
                _self.stockResult = req.Data
                // req.data.forEach(v => {
                //   _self.stockResult.push(v)
                // })
              }
            })
          } else {
            _self.count = 0
            _self.stockResult = []
          }
        })
      },
      loadMore () {
        this.loading = false
        this.stockPage++
        this.getStockList(this.code)
        // setTimeout(() => {
        //   this.getStockList(this.code)
        //   this.loading = false
        // }, 2500)
      },
      showStockListFunc () {
        let arrCode = []
        let _self = this
        this.selectFactors.forEach(v => {
          arrCode.push(v.id)
        })
        let strCode = arrCode.join('|')
        API.getStockCodes({params: {factors: strCode}}).then((res) => {
          return res.Data
        }).then(res => {
          API.getStockResults({params: {IDs: res}}).then((req) => {
            if (!Array.isArray(req.Data)) {
              _self.count = 0
              _self.stockResult = []
            } else {
              _self.count = req.Data.length
              _self.stockResult = req.Data
            }
          })
        })
      },
      // 保存策略
      saveStratrgy () {
        this.sheetVisible = true
      },
      newStrategy: function () {
        let selectFactors = this.$store.state.selectFactors
        if (selectFactors.length > 0) {
          this.$router.push('/newStrategyName')
        } else {
          Toast({
            message: '未选择因子',
            position: 'bottom',
            duration: 3000
          })
        }
      },
      // 暂时
      goToSearchJs () {
        this.$router.push({path: '/factorSortsSearch', query: {type: 'tech'}})
      },
      goToSearchGn () {
        this.$router.push({path: '/factorSortsSearch', query: {type: 'concept'}})
      },
      goToSearchDy () {
        this.$router.push({path: '/factorSortsSearch', query: {type: 'district'}})
      },
      goToSearchHy () {
        this.$router.push({path: '/factorSortsSearch', query: {type: 'industry'}})
      },
      goToSearchFg () {
        this.$router.push({path: '/factorSortsSearch', query: {type: 'style'}})
      },
      goToSearchCw () {
        this.$router.push({path: '/factorSortsSearch', query: {type: 'finance'}})
      }
    },
    mounted () {
      this.selectFactors = this.$store.state.selectFactors
    },
    computed: {
      selectFactorsFunc () {
        this.selectFactors = this.$store.state.selectFactors
        // this.showStockListFunc()
        // this.getStockList()
        this.getStockListTest()
        return this.selectFactors
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  #factorSortsMore {
    background: #f8f8f8;
    .mint-header.is-fixed {
      background-color: #0f1316;
    }
    .sort-cont {
      margin-top: 1.25rem;
      .originColor {
        background: #f2f2f2 !important;
        color: #4f4f4f !important;;
      }
      .selectColor {
        background: #26a2ff !important;
        color: #ffffff !important;;
      }
      .s-factor {
        width: auto;
        height: 0.6666667rem;
        line-height: 0.6666667rem;
        padding: 0px 0.1066667rem;
        background: #f2f2f2;
        float: left;
        color: #4f4f4f;
        margin: 0.1333333rem 0.1066667rem;
        border-radius: 0.1066667rem;
        position: relative;
      }
      .icon-close {
        position: absolute;
        right: -0.16rem;
        top: -0.32rem;
        height: 0.32rem;
        width: 0.32rem;
        i {
          background: #1296db;
          color: #ffffff;
          border-radius: 50%;
          height: 0.32rem;
          width: 0.32rem;
        }
      }
      .org_bg {
        border: 1px solid #f2f2f2;
        color: #000000;
        background: #f2f2f2;
      }
      .sel_bg {
        border: 1px solid #1296db;
        color: #1296db;
        background: #ffffff;
      }
      .s-more {
        width: auto;
        height: 0.6666667rem;
        line-height: 0.6666667rem;
        padding: 0px 0.1066667rem;
        float: right;
        color: #1296db;
        margin: 0.1333333rem 0.1066667rem;
        border-radius: 0.1066667rem;
      }

      .sort-select {
        min-height: 2.4rem;
        position: relative;
        background: #ffffff;
        overflow: hidden;
        .sort-label {
          text-align: center;
          min-height: 2.4rem;
          font-size: 0.4rem;
        }
        .icon-del {
          position: absolute;
          right: 0.2666667rem;
          top: 0.1066667rem;
          i {
            font-size: 0.4533333rem;
            color: #cccccc;
          }
        }
      }

      .sort-condition {
        .sort-result-count {
          text-align: left;
          margin-left: 0.4rem;
        }
        .my-collapse-item-open {
          height: 1.0666667rem;
          line-height: 1.0666667rem;
          color: #1296db;
          background: #f8f8f8;
        }
      }
      .sort-stock {
        background: #ffffff !important;
        .bg_red {
          color: red !important;
        }
        .bg_green {
          color: green !important;
        }
        .sort-stock-tab {
          height: 1.0666667rem;
          /*line-height: 1.0666667rem;*/
          display: box;
          display: -webkit-box;
          display: -moz-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          -webkit-box-pack: center;
          -webkit-justify-content: center;
          -moz-justify-content: center;
          -ms-justify-content: center;
          -o-justify-content: center;
          -webkit-box-align: center;
          -webkit-align-items: center;
          -moz-align-items: center;
          -ms-align-items: center;
          -o-align-items: center;
          align-items: center;
          -webkit-box-orient: horizontal;
          -webkit-flex-direction: row;
          -moz-flex-direction: row;
          -ms-flex-direction: row;
          -o-flex-direction: row;
          flex-direction: row;
          font-size: 0.3466667rem;
          border-bottom: 1px solid #e5e5e5;
          background: #ffffff;
          div {
            -webkit-box-flex: 1;
            -moz-box-flex: 1;
            /*width: 20%;*/
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
            color: #a0a0a0;
          }
        }
        .sort-stock-list {
          margin-bottom: 0.96rem;
          .sort-stock-list-item {
            height: 1.0666667rem;
            /*line-height: 1.0666667rem;*/
            display: box;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -moz-justify-content: center;
            -ms-justify-content: center;
            -o-justify-content: center;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -moz-align-items: center;
            -ms-align-items: center;
            -o-align-items: center;
            align-items: center;
            -webkit-box-orient: horizontal;
            -webkit-flex-direction: row;
            -moz-flex-direction: row;
            -ms-flex-direction: row;
            -o-flex-direction: row;
            flex-direction: row;
            background: #ffffff;
            border-bottom: 1px solid #e5e5e5;
            div {
              -webkit-box-flex: 1;
              -moz-box-flex: 1;
              /*width: 20%;*/
              -webkit-flex: 1;
              -ms-flex: 1;
              flex: 1;
              color: #000000;
              &:nth-of-type(1) {
                display: box;
                display: -webkit-box;
                display: -moz-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                -webkit-box-orient: vertical;
                -webkit-flex-direction: column;
                -moz-flex-direction: column;
                -ms-flex-direction: column;
                -o-flex-direction: column;
                flex-direction: column;
                p {
                  -webkit-box-flex: 1;
                  -moz-box-flex: 1;
                  /*width: 20%;*/
                  -webkit-flex: 1;
                  -ms-flex: 1;
                  flex: 1;
                  &:nth-of-type(2) {
                    color: #a0a0a0;
                  }
                }
              }
            }
          }
        }
      }
    }
    .footer {
      position: fixed;
      bottom: 0;
      border-top: 1px solid #e5e5e5;
      width: 100%;
      background: #ffffff;
      .footer-wrapper {
        display: box;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        /*justify-content: center;*/
        /*align-items: center;*/
        height: 0.96rem;
        line-height: 0.96rem;
        .add-stock {
          -webkit-box-flex: 1;
          -moz-box-flex: 1;
          /*width: 20%;*/
          -webkit-flex: 1;
          -ms-flex: 1;
          flex: 1;
          border-right: 1px solid #e5e5e5;
        }
        .save-strategy {
          -webkit-box-flex: 1;
          -moz-box-flex: 1;
          /*width: 20%;*/
          -webkit-flex: 1;
          -ms-flex: 1;
          flex: 1;
        }
      }

    }

  }

</style>
